<template>
  <div class="drawRule">
    <div class="top">
      <el-row>
        <el-col :span="22">
          <div class="grid-content bg-purple-dark ruler">
            提现规则
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">
            <el-button
              type="primary"
              size="small"
              style="background-color: #1BA687"
            >
              保存信息
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="detail">
      <el-row>
        <el-col :span="2">
          <div class="grid-content bg-purple-dark ruler">
            <span class="must">*</span>
            选择结算周期：
          </div>
        </el-col>
        <el-col :span="30">
          <div class="grid-content bg-purple-dark ruler">
            <span v-for="(item,index) in closeWay"
                  :key="index"
            >
              <i class="el-icon-success"
                 style="width:30px;height: 30px"
              ></i>
              <span style="padding-right:10px;">{{item}}</span>
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <div class="grid-content bg-purple-dark ruler">
            <span class="must">*</span>
            最低提现金额：
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-dark ruler">
            <el-input v-model="moneyNum"
                      placeholder="请输入内容"
                      size="small"
                      style="width:200px;"
            ></el-input>
            <span>元</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="2"
          style="padding-left:20px"
        >
          <div class="grid-content bg-purple-dark ruler">
            <span class="must">*</span>
            提现手续费：
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-dark ruler">
            <span>提现金额的</span>
            <el-input v-model="moneyNum"
                      placeholder="请输入内容"
                      size="small"
                      style="width:99px;"
            ></el-input>
            <span>%</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="3"
          style="padding-left:20px"
        >
          <div class="grid-content bg-purple-dark ruler">
            <span class="must">*</span>
            前端显示提现规则：
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-dark ruler">
            <el-input
              type="textarea"
              :rows="10"
              resize="none"
              placeholder="请输入内容"
              v-model="textarea"
              style="width: 500px;"
            >
            </el-input>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pending',
  data() {
    return {
      moneyNum: '',
      textarea: '',
      closeWay: ['秒结', '日结', '周结', '月结']
    }
  }
}
</script>

<style scoped lang="scss">
  .drawRule{
    width:98%;
    margin-top:20px;
    margin-left:20px;
    .top{
      .ruler{
        color:#333333;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .detail{
      margin:40px 0 0 50px;
      color:#333333;
      font-size:14px;
      .el-row{
        line-height:60px;
        /*margin-bottom:40px;*/
        .must{
          color: red;
        }
      }
    }

  }
</style>
